<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3生命周期</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/VUE/swiper/swiper-bundle.min.css">
    <script src="/VUE/swiper/swiper-bundle.min.js"></script>
    <script src="/VUE/vue3.js"></script>
</head>
<body>
<div id="box">
    {{ myname }}

    <navbar v-if="isShow" :myname="this.myname">
        127768237486
    </navbar>

</div>
<script>
    let obj = {
        data(){
            return{
                myname:"最爱吃兽奶",
                isShow: true,
            }
        },
    }

    let vm = Vue.createApp(obj)
        .component("navbar",{
            props:["myname"],
            template: `
                <div>
                    navbar-{{ myname }}
                    <slot></slot>
                </div>
            `,

            beforeCreate() {
                console.log("beforeCreate")
            },
            created(){
                console.log("created")

                this.id = null
            },
            beforeMount(){
                console.log("beforeMount")
            },
            mounted(){
                console.log("mounted")

                this.id = setInterval(()=>{
                    console.log("倒计时")
                },1000)
            },

            // 生命周期销毁在 Vue3 中被替换成 unmount
            // beforeDestroy(){
            //     console.log("beforeDestroy")
            //
            //     clearInterval(this.id)
            // },
            // destroyed(){
            //     console.log("destroyed")
            // }

            beforeUnmount(){
                console.log("beforeUnmount")
                clearInterval(this.id)
            },
            unmounted(){
                console.log("unmounted")
            },
        })
        .mount("#box")

</script>
</body>
</html>